<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
</head>
<body>

<input type="text" id="content">
<button type="button" id="add-btn">添加</button>

<h1 id="todo-h1">待办 <span>(5)</span></h1>

<ul id="todo-ul">
<!--    <li>-->
<!--        <span>学习vue</span>-->
<!--        <button type="button">完成</button>-->
<!--        <button type="button">删除</button>-->
<!--    </li>-->
<!--    <li>-->
<!--        <span>学习java</span>-->
<!--        <button type="button">完成</button>-->
<!--        <button type="button">删除</button>-->
<!--    </li>-->
</ul>

<h1 id="finished-h1">已完成 <span>(5)</span></h1>
<ul id="finished-ul">
    <li>
<!--        <span>学习vue</span>-->
<!--&lt;!&ndash;        <button type="button">完成</button>&ndash;&gt;-->
<!--        <button type="button">删除</button>-->
<!--    </li>-->
<!--    <li>-->
<!--        <span>学习java</span>-->
<!--&lt;!&ndash;        <button type="button">完成</button>&ndash;&gt;-->
<!--        <button type="button">删除</button>-->
<!--    </li>-->
</ul>

<script>
    var content = document.getElementById('content');
    var addBtn = document.getElementById('add-btn');
    var todoUl = document.getElementById('todo-ul');
    var todoH1 = document.getElementById('todo-h1');


    addBtn.onclick = function () {
        addTodo();
    }

    var enterkeyCode =13;
    content.onkeyup = function (e){
        // console.log(enterkeyCode)
        if (e.keyCode ==enterkeyCode){
            addTodo();
        }
    }

    var todos = [0];

    function renderTodos() {
        var html = ''
        for (var i = 0; i < todos.length; i++) {
            var todo = todos[i];
            html +='<li>\n' +
                '        <span>' + todo+ '</span>\n' +
                '        <button type="button" class="add-finish" onclick="addFinished(' + i + ')">完成</button>\n' +
                '        <button type="button">删除</button>\n' +
                '    </li>';
        }
        todoUl.innerHTML = html;

        todoH1.firstElementChild.innerText = '(' + todos.length + ')';
    }

    renderTodos();
    function addTodo(){
        // 获取输入框的值
        var value = content.value;

        if (!value.trim()){

            alert('请输入内容');
            return;
        }

        todos.push(value);
        renderTodos();

        content.value = '';

    }
    var finishUl = document.getElementById('finished-ul');
    var finishH1 = document.getElementById('finished-h1')

    var finished = [];
    function renderFinished() {
        var html = ''
        for (var i = 0; i < finished.length; i++) {
            var f = finished[i];
            html +='<li>\n' +
                '        <span>' + f+ '</span>\n' +
                '        <button type="button" class="add-finish" onclick="addFinished(' + i + ')">完成</button>\n' +
                '        <button type="button">删除</button>\n' +
                '    </li>';
        }
        finishUl.innerHTML = html;

        finishH1.firstElementChild.innerText = '(' + finished.length + ')';
    }
    renderFinished();


    function addFinished(index) {
        finished.push(finished[index]);
        // console.log(finished);
        renderFinished();
        todos.splice(index,1);
        renderTodos();
    }
    // var addFinish
</script>

</body>
</html>